import {ITodoItem, ITodoList} from "../interface";
import {Checkbox} from "antd";
import {DeleteOutlined} from "@ant-design/icons";
import styles from "./TodoList.module.less"
import React from "react";

const TodoList: React.FC<ITodoList> = (props: ITodoList) => {
    const {list = [], delTodo, changeCompleted} = props
    return (
        <ul>
            {list.map((item: ITodoItem) => (
                <li className={styles.todoItem} key={item.id}>
                    <Checkbox checked={item.completed} onClick={() => changeCompleted(item.id)}/>
                    <span className={item.completed ? styles.delContent : ''}>{item.text}</span>
                    <DeleteOutlined className={styles.delBut} onClick={() => delTodo(item.id)}/>
                </li>
            ))}
        </ul>
    )
}

export default TodoList